<!DOCTYPE html>
<html>
<head>
  <title>全国实时车辆监控系统</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <style>
    body { margin: 0; padding: 0; }
    #map { height: 100vh; width: 100vw; }
    .vehicle-icon {
      background: #3388ff;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 10px;
      border: 2px solid white;
    }
    .info-panel {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 1000;
      background: white;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <div class="info-panel">
    <div>车辆总数: <span id="vehicle-count">0</span></div>
    <button onclick="addVehicle()">添加车辆</button>
    <button onclick="removeVehicle()">移除车辆</button>
  </div>

  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script>
    // 1. 初始化全国地图（使用高德地图）
    const map = L.map('map').setView([35.86166, 104.195397], 5);
    L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
      subdomains: ['1','2','3','4'],
      attribution: '&copy; 高德地图'
    }).addTo(map);

    // 2. 添加国界线（使用阿里云DataV数据）
    fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
      .then(res => res.json())
      .then(data => {
        L.geoJSON(data, {
          style: { color: '#ff0000', weight: 1, fillOpacity: 0 }
        }).addTo(map);
      });

    // 3. 车辆数据与图层
    const vehiclesLayer = L.layerGroup().addTo(map);
    const vehicles = [];

    // 4. 创建车辆图标（显示车牌前两位）
    function createVehicleIcon(name) {
      return L.divIcon({
        className: 'vehicle-marker',
        html: `<div class="vehicle-icon">${name.substring(0,2)}</div>`,
        iconSize: [24, 24]
      });
    }
	
    // 5. 生成随机车辆（分布在全国范围）
   // 在全局变量区域定义省份简称数组（中国所有省份车牌简称）
   const PROVINCE_SHORT = ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', 
                         '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', 
                         '鄂', '湘', '粤', '桂', '琼', '渝', '川', '贵', 
                         '云', '藏', '陕', '甘', '青', '宁', '新', '港', '澳'];
   
   // 修改后的车辆生成函数
   function generateRandomVehicle() {
     const province = PROVINCE_SHORT[Math.floor(Math.random() * PROVINCE_SHORT.length)];
     const char = String.fromCharCode(65 + Math.floor(Math.random() * 26)); // A-Z
     const numbers = Math.random().toString().substr(2, 5).padEnd(5, '0'); // 保证5位数字
     
     return {
       id: `${province}${char}${numbers}`,
       lat: 35.86166 + (Math.random() - 0.5) * 20,
       lng: 104.195397 + (Math.random() - 0.5) * 35
     };
   }
   
   // 同时需要更新图标创建函数（显示完整的省+字母）
   function createVehicleIcon(licensePlate) {
     return L.divIcon({
       className: 'vehicle-marker',
       html: `<div class="vehicle-icon">${licensePlate.substring(0,2)}</div>`,
       iconSize: [24, 24]
     });
   }

    // 6. 更新车辆位置（演示用随机移动）
    function updateVehicles() {
      vehiclesLayer.clearLayers();
      
      vehicles.forEach(v => {
        // 随机微调位置（模拟移动）
        v.lat += (Math.random() - 0.5) * 0.1;
        v.lng += (Math.random() - 0.5) * 0.1;
        
        // 限制车辆不超出中国国界（简单版）
        v.lat = Math.max(15, Math.min(55, v.lat));
        v.lng = Math.max(73, Math.min(136, v.lng));
        
        const marker = L.marker([v.lat, v.lng], {
          icon: createVehicleIcon(v.id)
        }).bindPopup(`车辆ID: ${v.id}<br>位置: ${v.lat.toFixed(4)}, ${v.lng.toFixed(4)}`);
        
        vehiclesLayer.addLayer(marker);
      });
      
      document.getElementById('vehicle-count').textContent = vehicles.length;
    }

    // 7. 控制函数
    function addVehicle() {
      vehicles.push(generateRandomVehicle());
      updateVehicles();
    }

    function removeVehicle() {
      if (vehicles.length > 0) {
        vehicles.pop();
        updateVehicles();
      }
    }

    // 8. 初始生成20辆随机车辆
    for (let i = 0; i < 20; i++) {
      vehicles.push(generateRandomVehicle());
    }
    updateVehicles();

    // 9. 设置定时更新（2秒刷新一次）
    setInterval(updateVehicles, 2000);

    // 10. 添加地图控件
    L.control.zoom({ position: 'bottomright' }).addTo(map);
  </script>
</body>
</html>
